<template>
  <div class="bottom-navbar">
    <!-- 底部导航栏子项 -->
    <navbar-item v-for="(nav, index) in navTabs":key="index" @click.native="active(index)" 
       :is-active="activeTab === index"
       :active-icon="nav.activeIcon"
       :icon="nav.icon" :nav-title="nav.title" :path="nav.path"></navbar-item>
  </div>
</template>

<script>
  import NavbarItem from '@/components/NavbarItem';
  export default {
    data(){
      return {
        activeTab : 0
      }
    },
    components: {
      NavbarItem
    },
    props: {
      navTabs: Array
    },
    methods:{
      active(index){
        this.activeTab = index
        console.log(this.activeTab)
        // 通知父组件，点击了哪个tab
        // 子组件通过$emit触发父组件的changeTab方法
        this.$emit('change-tab', index)
      }
    }
  }
</script>

<style scoped>
  .bottom-navbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #f0f0f0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 60px;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
  }
</style>